<template>
  <div class="homepage">
    <div class="homepage_main">
      <div class="top_class">
        <el-card
          :body-style="{ padding: '10px' }"
          style="border-radius: 10px;"
          shadow="never"
        >
          <div class="class_list">
            <div style="margin-right:8px;color:#007aff;font-size:12px">
              <i class="iconfont icon_jd_menu" style="font-size:13px"></i>
              <span style="margin-left:5px;">商品分类</span>
            </div>
            <div class="classradio">
              <el-radio-group
                v-model="classradio"
                @change="classchange"
                size="mini"
              >
                <el-radio
                  :label="item.id"
                  v-for="(item, index) in classList"
                  :key="index"
                >{{ item.class_name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
        </el-card>
      </div>
      <div class="banner">
        <div class="banner_main">
          <div class="banner_left">
            <el-card :body-style="{ padding: '0px' }" shadow="never">
              <div class="swiper_box" style="position:relative">
                <div>
                  <p class="left_title">招商实力榜</p>
                  <el-radio-group v-model="swipershow" @change="swiperchange">
                    <el-radio-button label="1">今日总销量</el-radio-button>
                    <el-radio-button label="2">上榜商品数</el-radio-button>
                    <el-radio-button label="3">在线商品数</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="swiper4" v-loading="loading">
                  <swiper
                    ref="mySwiper4"
                    class="swiper-no-swiping"
                    :options="swiperOptions4"
                  >
                    <swiper-slide
                      v-for="(team, index) in teamList"
                      :key="index"
                    >
                      <div v-for="(item, i) in team" :key="i" class="team_box">
                        <div class="team_left">
                          <el-image
                            class="userimg"
                            style="width: 50px; height: 50px"
                            :src="item.user_img"
                            fit="cover"
                          ></el-image>
                          <div class="position">
                            <img
                              v-if="item.index == 1"
                              class="cmark"
                              :src="require('@/assets/imgs/one.png')"
                              alt=""
                              srcset=""
                            />
                            <img
                              v-if="item.index == 2"
                              class="cmark"
                              :src="require('@/assets/imgs/two.png')"
                              alt=""
                              srcset=""
                            />
                            <img
                              v-if="item.index == 3"
                              class="cmark"
                              :src="require('@/assets/imgs/three.png')"
                              alt=""
                              srcset=""
                            />
                            <div v-if="item.index > 3" class="cmark2">
                              {{ item.index }}
                            </div>
                          </div>
                          <!-- <p class="position2">LV. {{ item.estate }}</p> -->
                        </div>
                        <div class="team_right">
                          <p class="team_name">{{ item.team_name }}</p>
                          <div class="team_info">
                            <img
                              :src="require('@/assets/imgs/medal.png')"
                              style="display: block;width: 13px;height: 14px;margin-right: 2px;"
                              alt=""
                              srcset=""
                            /><span
                            >今日在线总销量 {{ item.month_goods_num }}</span
                            >
                          </div>
                        </div>
                      </div>
                    </swiper-slide>

                    <div class="swiper-paginations s4" slot="pagination"></div>
                  </swiper>
                  <div class="swiper-button-prevs prevs4">
                    <i class="iconfont icon_jd_left"></i>
                  </div>
                  <div class="swiper-button-nexts nexts4">
                    <i
                      class="iconfont icon_jd_left"
                      style="transform: rotate(180deg)"
                    ></i>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <div class="banner_center">
            <el-card :body-style="{ padding: '0px' }" shadow="never" v-loading="bannerloading">
              <div class="swiper_box2">
                <div class="top_swiper">
                  <swiper
                    ref="mySwiper2"
                    :options="swiperOptions2"
                    style="height: 487px;"
                    :not-next-tick="swiperOptions2.notNextTick"
                  >
                    <swiper-slide
                      v-for="(item, index) in bannerList"
                      :key="index"
                    >
                      <a
                        :href="item.href"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <img
                          style="width: 630px; height: 100%"
                          :src="item.pic"
                          @mouseenter="swiperstop"
                          @mouseleave="swiperstart"
                        />
                      </a>
                    </swiper-slide>
                    <!-- <div
                      class="swiper-pagination2"
                      slot="pagination"></div> -->
                  </swiper>
                  <!-- <div class="swiper-button-prev2">
                    <i class="iconfont icon_jd_left"></i>
                  </div>
                  <div class="swiper-button-next2">
                    <i
                      class="iconfont icon_jd_left"
                      style="transform: rotate(180deg)"></i>
                  </div> -->
                </div>
                <!-- 下方 -->
                <!-- <div class="bot_swiper">
                  <swiper
                    id="mySwiper3"
                    ref="mySwiper3"
                    :options="swiperOptions3"
                    style="height: 100px;"
                    :not-next-tick="swiperOptions3.notNextTick">
                    <swiper-slide
                      v-for="(item, index) in bannerList"
                      :key="index">
                      <img
                        style="width: 188px;object-fit: cover;"
                        :src="item.pic"
                        @mouseenter="swiperstop"
                        @mouseleave="swiperstart" />

                      <div class="shade"></div>
                    </swiper-slide>
                  </swiper>
                </div> -->
              </div>
            </el-card>
          </div>
          <div class="banner_right">
            <div>
              <div class="login_box">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <div class="login_main" v-if="!logined">
                    <div
                      style="padding-bottom:10px;width: 200px;margin: 0 auto;"
                    >
                      <el-avatar
                        style="width: 85px;height: 85px;background-color: #FFF;border:1px solid #f7f7f7;padding:10px"
                        :src="require('@/assets/imgs/logo.png')"
                      ></el-avatar>
                      <p style="color:#409eff;">欢迎来到京粉客!</p>
                    </div>
                    <div class="login_btn">
                      <el-button size="small" type="primary">
                        <router-link
                          :to="{
                            path: '/login',
                            query: {
                              active: 'login',
                              redirect: this.$route.fullPath
                            }
                          }"
                        >登 录</router-link
                        >
                      </el-button>
                      <el-button size="small" plain>
                        <router-link
                          :to="{
                            path: '/login',
                            query: {
                              active: 'register',
                              redirect: this.$route.fullPath
                            }
                          }"
                        >注 册</router-link
                        >
                      </el-button>
                    </div>
                  </div>
                  <div v-else class="logined">
                    <div class="avatar">
                      <el-avatar
                        style="width: 85px;height: 85px;background-color: #FFF;border:1px solid #f7f7f7;padding:10px"
                        :src="userinfo.user_img"
                      ></el-avatar>
                      <p style="color:#409eff;">{{ userinfo.nickname }}</p>
                      <el-button
                        size="mini"
                        round
                        @click="dologinout"
                      >退出登录</el-button
                      >
                    </div>
                    <div class="login_btn">
                      <el-button size="small" plain>
                        <router-link
                          :to="{ path: '/admin/goods/add' }"
                          target="_blank"
                          tag="a"
                        >放单后台</router-link
                        >
                      </el-button>
                      <el-button size="small" plain>
                        <router-link
                          :to="{ path: '/admin' }"
                          target="_blank"
                          tag="a"
                        >个人中心</router-link
                        >
                      </el-button>
                    </div>
                  </div>
                </el-card>
              </div>
              <div class="news_box">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <div class="news_main">
                    <div class="news_nav">
                      <el-radio-group v-model="newsra" @change="newsrachange">
                        <el-radio :label="7" class="news_item">
                          <div style="padding-bottom: 5px;">公告</div>
                          <div class="line"></div>
                        </el-radio>
                        <el-radio :label="8" class="news_item">
                          <div style="padding-bottom: 5px;">规则</div>
                          <div class="line"></div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                    <div
                      v-show="newsra == 7"
                      style="box-sizing: border-box;padding: 12px;"
                    >
                      <div
                        v-for="(item, index) in newsList"
                        :key="index"
                        class="display"
                        style="padding-bottom:5px"
                      >
                        <span
                          class="timer"
                        >[{{ moment(item.update_at).format('MM-DD') }}]</span
                        >
                        <a
                          class="titler"
                          @click="gohelp(item.id)"
                        >{{ item.title }}</a
                        >
                      </div>
                    </div>
                    <div
                      v-show="newsra == 8"
                      class="rule_box"
                      style="box-sizing: border-box;padding: 12px;"
                    >
                      <span
                        v-for="(item, index) in ruleList"
                        :key="index"
                        class="rule_span"
                      >
                        <span
                          class="timer"
                        >[{{ moment(item.update_at).format('MM-DD') }}]</span
                        >
                        <a
                          class="titler"
                          @click="gohelp(item.id)"
                        >{{ item.title }}</a
                        >
                      </span>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 好单排行榜 -->
      <div class="fine_goods">
        <el-card
          class="box-card"
          :body-style="{ padding: '0px' }"
          shadow="never"
          v-loading="goodsloading"
        >
          <div slot="header" class="clearfix">
            <div class="display">
              <div>
                <span class="header_title">好单排行榜</span>
                <span class="line1"></span>
                <span class="header_en">Good Single Leaderboard</span>
              </div>
              <div>
                <el-radio-group
                  v-model="finegoods"
                  @change="finegoodschange"
                  size="mini"
                >
                  <el-radio-button label="1">2小时内销量</el-radio-button>
                  <el-radio-button label="2">今日销量</el-radio-button>
                  <el-radio-button label="3">总销量</el-radio-button>
                  <el-radio-button label="4">昨日销量</el-radio-button>
                  <el-radio-button label="5">搜索次数</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="goods_Box">
            <div class="goods_bot">
              <el-row :gutter="24" style="margin:0;margin-left: 7px;">
                <el-col
                  :span="15"
                  class="hover_box2"
                  style="height: 358px;"
                  v-for="(item, index) in goodsList"
                  :key="index"
                >
                  <!-- top标签 -->
                  <div class="position_Box">
                    <i class="iconfont icon_top topimg2"></i>
                    <div class="top_num2">{{ index + 1 }}</div>
                  </div>
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <el-popover
                      placement="bottom"
                      width="220"
                      trigger="hover"
                      popper-class="popover2"
                      transition="zoom-in-top"
                    >
                      <div class="shops_info22">
                        <div class="disflex">
                          <span
                            class="childone"
                          >原价:{{ item.goods_price }}元</span
                          >
                          <div class="childtwo">
                            <span
                              style="margin-right:12px"
                            >领劵量:{{
                              item.coupon_all_num - item.coupon_surplus_num
                            }}</span
                            >剩余劵量:{{ item.coupon_surplus_num }}
                          </div>
                          <div class="childtwo">
                            <span
                              style="margin-right:12px"
                            >月销量:{{ item.month_goods_num }}</span
                            >日销量:{{ item.today_coupon_num }}
                          </div>
                        </div>
                        <div class="disflex">
                          <span class="childone">店铺:</span>
                          <span class="childtwo">{{ item.shop_name }}</span>
                        </div>
                        <!-- <div class="disflex">
                          <span class="childone">来源:</span>
                          <span class="childtwo">{{ item.nickname }}</span>
                        </div> -->
                      </div>
                      <div class="top_main2" slot="reference">
                        <div
                          class="demo-image__lazy"
                          style="cursor: pointer;width:220px;height:220px"
                        >
                          <el-image
                            @click="godetails(item.id)"
                            class="elimg2"
                            style="width:220px;height:220px"
                            fit
                            :src="item.goods_img"
                            lazy
                          >
                            <div slot="placeholder" class="image-slot">
                              <Goodsloading></Goodsloading>
                            </div>
                          </el-image>
                        </div>
                        <div class="top_right2">
                          <div class="top_title2">
                            <a
                              :href="item.goods_url"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {{ item.goods_name }}</a
                            >
                          </div>
                          <div class="top_roll2">
                            <span class="roll_text" v-if="index == 0">
                              品牌榜top1，热销{{ item.month_goods_num }}件
                            </span>
                            <span
                              class="roll_text"
                              v-if="index < 5 && index !== 0"
                            >
                              复购不断，近两小时热推{{ item.goods_today_xl }}件
                            </span>
                            <span class="roll_text" v-if="index > 4">
                              排行火速上升，{{ item.class_name }}类目TOP1
                            </span>
                          </div>
                          <div class="top_data2">
                            <div>
                              <p>{{ item.goods_after_price }}</p>
                              <p style="font-size:12px">劵后价</p>
                            </div>
                            <div>
                              <p>{{ item.coupon_discount }}</p>
                              <p style="font-size:12px">优惠券</p>
                            </div>
                            <div>
                              <p>{{ item.commission_bl }}%</p>
                              <p style="font-size:12px">营销</p>
                            </div>
                          </div>
                        </div>
                        <div class="shops_Box2">
                          <div class="shops_action2">
                            <div class="action_box2">
                              <div class="join_collect2">
                                <el-button class="join_btn12" type="primary">
                                  <!-- @click="addCollection(item.id)" -->
                                  <!-- <span class="iconimg12"></span> -->
                                  <span>
                                    在线转链
                                  </span>
                                </el-button>
                              </div>
                              <div class="copy2">
                                <el-popover
                                  popper-class="popover"
                                  placement="right"
                                  width="300"
                                  trigger="hover"
                                >
                                  <div
                                    class="position_hover"
                                    :id="'goodslis' + index"
                                  >
                                    <div class="demo-image__lazy">
                                      <el-image
                                        class="elimghover"
                                        fit
                                        :src="item.goods_img"
                                      >
                                      </el-image>
                                    </div>
                                    <div>{{ item.goods_name }}</div>
                                    <div>
                                      原价:{{ item.goods_price }}【劵后价:{{
                                        item.goods_after_price
                                      }}】 包邮
                                    </div>
                                    <div>
                                      月销量:{{
                                        item.month_goods_num
                                      }}
                                      好评数:{{ item.good_review_num }}
                                    </div>
                                    <div>领卷:{{ item.coupon_url }}</div>
                                    <div>抢购:{{ item.goods_url }}</div>
                                    <div>{{ item.goods_copywriting }}</div>
                                    <!-- </el-card> -->
                                  </div>
                                  <el-button
                                    class="join_btn22"
                                    type="primary"
                                    slot="reference"
                                    @mousedown.native="
                                      handleOk2('goodslis' + index)
                                    "
                                    @click="handleOk('goodslis' + index)"
                                  >
                                    <span>
                                      复制文案
                                    </span>
                                  </el-button>
                                </el-popover>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-popover>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="more_goods">
            <router-link to="/jdselectgoods/realtimelist">
              <el-button plain style="width:100%">
                查看实时榜单<i class="el-icon-arrow-right el-icon--right"></i>
              </el-button>
            </router-link>
          </div>
        </el-card>
      </div>
      <!-- 品牌汇 -->
      <div class="sale_box">
        <el-card
          class="box-card"
          :body-style="{ padding: '0 20px 20px 20px' }"
          shadow="never"
          v-loading="brandloading"
        >
          <div slot="header" class="clearfix">
            <div class="display">
              <div>
                <span class="header_title">品牌汇</span>
                <span class="line1"></span>
                <span class="header_en">Brand Exchange</span>
              </div>
              <div>
                <el-radio-group
                  v-model="classid"
                  @change="saleclasschange"
                  size="mini"
                >
                  <el-radio-button
                    :label="item.id"
                    v-for="(item, index) in classList"
                    :key="index"
                  >{{ item.class_name }}</el-radio-button
                  >
                  <!-- <el-radio-button label="6"
                    >更多<i class="el-icon-arrow-right el-icon--right"></i
                  ></el-radio-button> -->
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="container">
            <div class="brandsale">
              <div class="title_box">
                <p class="topt">品牌专场</p>
                <p class="bott">品牌特卖活动，限时热销</p>
              </div>
              <div class="sale_left">
                <div
                  v-for="(item, index) in saletopList"
                  :key="index"
                  class="sale_right"
                  :style="{
                    backgroundImage: item.logo
                  }"
                >
                  <div class="sale_name">
                    <p class="item_name">{{ item.brand_name }}</p>
                    <p class="item_info">{{ item.desc }}</p>
                  </div>
                  <div class="sale_discount">
                    <!-- <span>低至{{ item.discountnum }}折</span> -->
                    <span>{{ item.label }}</span>
                  </div>
                  <div class="salemaingoods">
                    <div v-for="(goods, index2) in item.data" :key="index2">
                      <a
                        class="goods_a"
                        :href="goods.goods_url"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <el-image
                          style="width: 90px; height: 90px"
                          :src="goods.goods_img"
                          fit="cover"
                        ></el-image>
                        <div class="goods_price">￥{{ goods.goods_price }}</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div class="salerankinglist">
              <div class="title_box">
                <p class="topt">品牌实时榜</p>
                <p class="bott">品牌推广风向标，一推即爆</p>
              </div>
              <div class="goods_Box" style="margin-top:0">
                <div class="goods_bot">
                  <el-row :gutter="24">
                    <el-col
                      :span="12"
                      class="hover_box2 hover_box"
                      v-for="(item, index) in brandnowList"
                      :key="index"
                    >
                      <!-- top标签 -->
                      <div class="position_Box">
                        <img class="saleimg" :src="item.logo" alt="" />
                        <div class="allnum">
                          <p>{{ item.month_goods_num }}</p>
                          <p>月销量</p>
                        </div>
                      </div>
                      <el-card shadow="hover" :body-style="{ padding: '0px' }">
                        <div class="top_main2">
                          <div
                            class="demo-image__lazy"
                            style="cursor: pointer;width:204px;height:215px"
                          >
                            <el-image
                              @click="godetails(item.id)"
                              class="elimg2"
                              style="width:204px;height:215px"
                              fit
                              :src="item.goods_img"
                              lazy
                            >
                              <div slot="placeholder" class="image-slot">
                                <Goodsloading></Goodsloading>
                              </div>
                            </el-image>
                          </div>
                          <div class="top_right2">
                            <div class="top_data2 top_data">
                              <div>
                                <p>{{ item.goods_after_price }}</p>
                                <p style="font-size:12px">劵后</p>
                              </div>
                              <div>
                                <p>{{ item.commission_bl }}%</p>
                                <p style="font-size:12px">营销</p>
                              </div>
                              <div>
                                <p>
                                  {{ item.today_coupon_num }}
                                </p>
                                <p style="font-size:12px">日销量</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div class="salelibrary">
              <div class="title_box">
                <p class="topt">品牌库</p>
                <p class="bott">好口碑高品质</p>
              </div>
              <div>
                <div
                  v-for="(item, index) in saleList"
                  :key="index"
                  class="slaelist"
                >
                  <a
                    :href="item.saleurl"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <el-image
                      style="width: 120px; height: 60px"
                      :src="item.logo"
                      fit="cover"
                    ></el-image>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import Goodsloading from '@/components/Goodsloading.vue'
import footerbox from '@/components/footerbox.vue'
import { getAdminClassList } from '@/api/article'
import moment from 'moment'
import {
  getClassBrand,
  getClassList,
  getBrandGoods,
  getBrandTwoSale,
  getSevenSale,
  getSelectedList,
  getBannerList,
  merchantTeamRanking
} from '@/api/homepage'
export default {
  name: 'Homepage',
  components: {
    Goodsloading,
    footerbox
  },
  data() {
    return {
      moment,
      loading:false,
      goodsloading:false,
      brandloading:false,
      userinfo: {
        user_img: this.$ls.get('userinfo')
          ? this.$ls.get('userinfo').user_img
          : '',
        nickname: this.$ls.get('userinfo')
          ? this.$ls.get('userinfo').nickname
          : ''
      },
      logined: this.$ls.get('token') ? true : false,
      classid: '',
      swipershow: '1',
      brandnowList: [], //品牌实时榜
      saleList: [
        // {
        //   logo: "#",
        //   imgurl:
        //     "http://img04.taobaocdn.com:80/tfscom/TB1yXj2DpzqK1RjSZFCXXbbxVXa"
        // },
        // {
        //   logo: "#",
        //   imgurl:
        //     "http://img02.taobaocdn.com:80/tfscom/TB1HcfUDCzqK1RjSZPxXXc4tVXa"
        // },
        // {
        //   logo: "#",
        //   imgurl: "http://img.haodanku.com/FrpXem9vZi2GmXfxo4vEUAuP1sf8"
        // },
        // {
        //   logo: "#",
        //   imgurl: "http://img.haodanku.com/Fo5Z4fULZi6HBhNSP0RfuXtDgevp"
        // }
      ],
      //两个优质商品
      saletopList: [
        // {
        //   brand_name: "shuke",
        //   desc: "智护时代 从齿开始",
        //   discountnum: "3.3",
        //   label: "一站式口腔护理",
        //   goodslist: [
        //     {
        //       goods_url: "#",
        //       goods_img:
        //         "https://img.alicdn.com/imgextra/i2/2614061582/O1CN014PFqp31NYbB8hTqbV_!!2614061582.jpg_310x310.jpg",
        //       price: "49.9"
        //     },
        //     {
        //       goods_url: "#",
        //       goods_img:
        //         "http://img.alicdn.com/imgextra/i4/355739614/O1CN01gYIm6U2KtGLdUrZKG_!!0-item_pic.jpg_310x310.jpg",
        //       price: "99.9"
        //     },
        //     {
        //       goods_url: "#",
        //       goods_img:
        //         "https://img.alicdn.com/imgextra/i2/2614061582/O1CN014PFqp31NYbB8hTqbV_!!2614061582.jpg_310x310.jpg",
        //       price: "49.9"
        //     }
        //   ]
        // }
      ],
      goodsList: [],
      finegoods: 1,
      newsra: 7,
      bannerList: [
        // {
        //   id: 1,
        //   href: 'www.baidu.com',
        //   pic:
        //     'http://img-haodanku-com.cdn.fudaiapp.com/Fk-x6rq9u0potrxVg2AhjjNmH6tR'
        // }
      ],
      classradio: '1',
      classList: [
        // {
        //   id: 1,
        //   class_name: "鞋品"
        // },
        // {
        //   id: 2,
        //   class_name: "衣服"
        // }
      ],
      teamList: [
        // [
        //   {
        //     id: 1,
        //   count: 99,
        //   coupon_count: 32,
        //   month_goods_num: '2223786',
        //   team_name: '1',
        //   user_img: '1'
        //   },
        // ],
      ],
      newsList: [
        // {
        //   id: 1,
        //   update_at: '[06-29]',
        //   title: '精选高转化的差异化货品数据，赋能京粉高效完成联盟组团任务！'
        // }
      ],
      ruleList: [
        // {
        //   id: 1,
        //   update_at: '[06-29]',
        //   title: '商品举报'
        // }
      ],
      swiperOptions4: {
        observer: true,
        observeParents: true,
        pagination: {
          el: '.s4',
          // dynamicBullets: true,
          clickable: true
        },
        navigation: {
          nextEl: '.nexts4',
          prevEl: '.prevs4'
        }
      },
      swiperOptions2: {
        // initialSlide: 2, //初始索引
        // notNextTick: true,
        // autoplay: true,
        // effect: 'fade',
        // observeParents: true,
        // grabCursor: true,
        // setWrapperSize: true,
        // mousewheelControl: true,
        // observer: true,
        // loop: true,
        // loopedSlides: 2,
        // pagination: {
        //   el: '.swiper-pagination2',
        //   type: 'fraction'
        // },
        // navigation: {
        //   nextEl: '.swiper-button-next2',
        //   prevEl: '.swiper-button-prev2'
        // },
        // controller: {
        //   control: this.swiperobj1   //双向控制
        // },
        // thumbs: {
        //   swiper: this.swiperobj1, //下方缩略图
        //   autoScrollOffset: 1
        // },
        on: {
          slideChangeTransitionStart: function() {
            // // console.log(this.activeIndex);
            // // console.log(this.$el[0].children[0].children[1]);
          }
        }
      },
      swiperOptions3: {
        initialSlide: 2, //初始索引
        // notNextTick: true,
        // autoplay: true,
        slideToClickedSlide: true,
        observeParents: true,
        grabCursor: true,
        setWrapperSize: true,
        mousewheelControl: true,
        observer: true,
        watchSlidesVisibility: true,
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        loopedSlides: 2,
        // centeredSlidesBounds: true,
        // controller: {
        //   control: this.swiperobj2 //双向控制
        // }
        on: {
          slideChangeTransitionStart: function() {
            // // console.log(this.activeIndex);
            // // console.log(this.$el[0].children[0].children);
          }
        }
      }
    }
  },

  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper;
    // },
    swiper4() {
      return this.$refs.mySwiper4.$swiper
    },
    // swiper5() {
    //   return this.$refs.mySwiper5.$swiper
    // },
    // swiper6() {
    //   return this.$refs.mySwiper6.$swiper
    // },
    swiperobj1() {
      return this.$refs.mySwiper2.$swiper
    }
    // swiperobj2() {
    //   return this.$refs.mySwiper3.$swiper
    // }
  },
  created() {
    this.getClassBrand()
    this.getClassList()
    this.getBannerList()
    this.getAdminClassList(7)
    this.merchantTeamRanking(1)
  },
  mounted() {
    // this.swiperobj1.controller.control = this.swiperobj2
    // this.swiperobj2.controller.control = this.swiperobj1
  },
  methods: {
    gohelp(id){
      const routes = this.$router.resolve({
        path: '/help',
        query: { id: id,newsra:this.newsra }
      })
      window.open(routes.href, '_blank')
    },
    newsrachange(val) {
      this.getAdminClassList(val)
    },
    //获取商家排行
    merchantTeamRanking(val) {
      this.loading=true
      merchantTeamRanking({
        sort: val
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('排行返回',res)
            this.teamList = []
            let num = 0
            this.teamList[num] = []
            for (const i in res.data) {
              if (i == 6) {
                num++
                this.teamList[num] = []
              }
              if (i == 6 + 6 * num) {
                num++
                this.teamList[num] = []
              }
              if (i < 6) {
                this.teamList[num].push(res.data[i])
              } else {
                // console.log("num", num);
                // console.log("i", i);
                if (i < 6 + 6 * num) {
                  // this.teamList[num] = [];
                  // console.log(this.teamList[num]);
                  this.teamList[num].push(res.data[i])
                }
              }
            }
            // console.log(this.teamList)
            this.loading=false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取文章
    getAdminClassList(val) {
      getAdminClassList({
        class_id: val
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('文章返回', res)
            if (val == 7) {
              this.newsList = res.data
              // console.log('this.newsList', this.newsList)
            } else {
              this.ruleList = res.data
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    dologinout() {
      this.$ls.clear()
      this.$parent.logined = false
      this.$message.success('退出成功')
      this.logined = false
    },
    handleOk2(val) {
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection()
        const range = document.createRange()
        // // console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)) //传入dom
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
      })
    },
    handleOk(val) {
      // console.log(val)
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection()
        const range = document.createRange()
        // console.log(document.getElementById(val))
        range.selectNode(document.getElementById(val)) //传入dom
        selection.addRange(range)
        document.execCommand('copy')
        this.$message.success('复制成功')
        selection.removeAllRanges()
      })
    },
    //获取banner图
    getBannerList() {
      this.bannerloading=true
      getBannerList({
        status: 1
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('banner返回', res)
            this.bannerList = res.data
            this.bannerloading=false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    godetails(id) {
      // console.log(id)
      const routes = this.$router.resolve({
        path: '/jdselectgoods/goodsdetails',
        query: { id: id }
      })
      window.open(routes.href, '_blank')
    },
    //获取好单排行榜商品
    getSelectedList(sort) {
      this.goodsloading=true
      getSelectedList({
        sort: sort, //1 = 2小时内销量最多，2 = 今日销量最多，3 = 总销量最多，4 = 昨日销量最多，5 = 搜索次数最多
        pagesize: 10
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('好单排行返回', res)
            this.goodsList = res.data.data.data
            this.goodsloading=false
            /* for (let k = 0; k < res.data.data.data.length; k++) {
              if (k < 11) {
                this.goodsList.push(res.data.data.data[k]);
              }
            }
            // console.log("class", this.classList);
            // console.log("goods", this.goodsList);
            for (let i = 0; i < this.classList.length; i++) {
              for (let j = 0; j < this.goodsList.length; j++) {
                if (this.classList[i].id == this.goodsList[j].goods_class_id) {
                  this.goodsList[j].class_name = this.classList[i].class_name;
                }
              }
            } */
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    finegoodschange(val) {
      // console.log('finegoods', val)
      this.getSelectedList(this.finegoods)
    },
    saleclasschange(val) {
      // console.log('classid', val)
      this.getBrandGoods(this.classid)
      this.getBrandTwoSale(this.classid)
      this.getSevenSale(this.classid)
    },
    //获取7个优质品牌
    getSevenSale(id) {
      getSevenSale({
        class_id: id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('7个优质品牌返回', res)
            this.saleList = res.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取两个优质商品
    getBrandTwoSale(id) {
      this.brandloading=true
      getBrandTwoSale({
        class_id: id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('2个优质商品返回', res)
            this.saletopList = []
            for (let i = 0; i < res.data.length; i++) {
              if (i < 2) {
                this.saletopList.push(res.data[i])
              }
            }
            this.brandloading=false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取品牌实时榜6个优质品牌返回
    getBrandGoods(id) {
      getBrandGoods({
        class_id: id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('6个优质品牌返回', res)
            this.brandnowList = res.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取分类
    getClassList() {
      getClassList()
        .then(res => {
          if (res.code == 200) {
            // console.log('分类返回', res)
            this.classList = res.data
            this.classid = res.data[0].id
            this.getSelectedList(1)
            this.getBrandGoods(this.classid)
            this.getBrandTwoSale(this.classid)
            this.getSevenSale(this.classid)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取分类下的品牌
    getClassBrand() {
      getClassBrand({
        class_id: 1
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('返回', res)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    swiperchange(val) {
      // console.log(val)
      // if (val == 1) {
      // this.swiper4.slideTo(0, 500, false)
      this.merchantTeamRanking(val)
      // }
      // if (val == 2) {
      //   this.swiper5.slideTo(0, 500, false)
      // }
      // if (val == 3) {
      //   this.swiper6.slideTo(0, 500, false)
      // }
    },
    swiperstop() {
      this.swiperobj1.autoplay.stop()
    },
    swiperstart() {
      this.swiperobj1.autoplay.start()
    },
    classchange(val) {
      // // console.log('classradio', val)
      var name = ''
      for (const i in this.classList) {
        if (val == this.classList[i].id) {
          name = this.classList[i].class_name
          break
        }
      }
      const routes = this.$router.resolve({
        path: '/jdselectgoods/allgoods',
        query: { class: val, name: name }
      })
      window.open(routes.href, '_blank')
    }
  }
}
</script>
<style lang="less">
.popover2 {
  margin-top: -5px !important;
  border: none;

  /* border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5; */
  border-bottom: 1px solid #ebeef5;
  box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
  .popper__arrow {
    display: none;
  }
}
.popover {
  // .el-popover {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 12px;
  // }
  .popper__arrow::after {
    border-right-color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>
<style lang="less" scoped>
.position_hover {
  // position: absolute;
  // top: -100px;
  // left: 225px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  // background-color: #00000075;
  // display: none;
  // width: 300px;
  text-align: left;
  // word-break: keep-all;
  // white-space: nowrap;
  font-size: 12px;
  .elimghover {
    width: 80px;
  }
}
.shops_info22 {
  font-size: 12px;
}
.goods_Box {
  width: 100%;
  // height: 500px;
  // position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  .goods_bot {
    position: relative;
    .hover_box2 {
      position: relative;
      width: 254px;
      // height: 358px;
      border-radius: 12px;
      margin-bottom: 20px;
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      flex-wrap: wrap;
      transition: all 300ms ease;
      z-index: 0;
      .position_Box {
        display: flex;
        flex-wrap: wrap;
        width: 62px;
        justify-content: flex-start;
        position: absolute;
        z-index: 2;
        .saleimg {
          width: 60px;
          height: 40px;
        }
        .allnum {
          //       position: absolute;
          // top: 40px;
          min-width: 60px;
          height: 40px;
          background: rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.08);
          border-radius: 0px 0px 10px 0px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          padding: 4px;
        }
        .topimg2 {
          font-size: 44px;
          color: #ff5c40;
          position: absolute;
          top: -5px;
          left: 15px;
          z-index: 2;
        }
        .top_num2 {
          position: absolute;
          width: 30px;
          top: 16px;
          left: 22px;
          font-size: 18px;
          color: #ffffff;
          z-index: 3;
          text-align: center;
        }
      }
      .top_main2 {
        background-color: #fff;
        // height: 220px;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        .top_right2 {
          padding-top: 5px;
          padding-bottom: 5px;
          font-size: 13px;
          margin: 0 auto;
          text-align: center;
          .top_title2 {
            width: 200px;
            // height: 16px;
            margin: 3px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            // padding-top: 8px;
            padding-bottom: 8px;
            a {
              margin-left: 8px;
              margin-right: 8px;
              font-size: 14px;
              text-decoration: none;
            }
          }
          .top_roll2 {
            height: 25px;
            line-height: 23px;
            border-radius: 13px;
            font-size: 12px;
            width: 95%;
            margin: 0 auto;
            box-sizing: border-box;
            // padding: 0 8px;
            white-space: nowrap;
            font-family: Microsoft YaHei;
            font-weight: 400;
            // padding: 0 18px;
            text-align: center;
            border: 1px solid rgba(86, 126, 255, 0.3);
            color: #4e78ff;
            span {
              // font-size: 16px;
              margin-left: 5px;
              margin-right: 5px;
              // color: blue;
              font-weight: bold;
            }
          }

          .top_data2 {
            height: 70px;
            font-size: 13px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            p {
              margin-top: 0 !important;
              margin-bottom: 0 !important;
            }
            p:first-child {
              color: #333;
              font-size: 16px;
              font-weight: bold;
            }
          }
          .top_data {
            height: 38px;
          }
        }
        .top_right2:focus {
          outline: none;
          outline-width: 0;
        }
      }
      .top_main2:focus {
        outline: none;
      }
      .shops_Box2 {
        // width: 100%;
        .shops_action2 {
          position: absolute;
          top: 220px;
          left: 13px;
          z-index: 1;
          opacity: 0;
          transition: all 1s initial;
          .action_box2 {
            width: 217px;
            display: flex;
            justify-content: center;
            align-items: center;
            .join_collect2 {
              background: linear-gradient(
                0deg,
                rgba(89, 158, 253, 0.8),
                rgba(77, 116, 255, 0.8)
              );
              font-size: 16px;
              // padding: 5px 0;
              overflow: hidden;
              border-top-left-radius: 10px;
              .join_btn12 {
                border: none;
                margin: 0 auto;
                padding: 7px 19px;
              }
            }
            .join_collect2:hover {
              opacity: 0.8;
              span {
                color: #fff;
              }
              .iconimg12 {
                // transform: translate(1px);
                // transform: scale(1.3);
                animation: landr 0.8s ease-in-out;
              }
            }
            .copy2 {
              background: linear-gradient(
                0deg,
                rgba(89, 158, 253, 0.8),
                rgba(77, 116, 255, 0.8)
              );
              font-size: 16px;
              overflow: hidden;
              border-top-right-radius: 10px;
              .join_btn22 {
                // background-color: rgb(255, 129, 48);
                border: none;
                padding: 7px 19px;
              }
            }
            // .copy2:hover + .position_hover {
            //   display: block;
            //   opacity: 1;
            //   z-index: 999999;
            // }
            .copy2:hover {
              opacity: 0.8;
              span {
                color: #fff;
              }
              .iconimg22 {
                // transform: translateX(1px), translatey(1px);
                // transform: scale(1.3);
                animation: landr 0.8s ease-in-out;
              }
            }
          }
        }
      }
    }
    .hover_box2:hover {
      border-radius: 10px 10px 0 0;
      transform: translateY(-5px);

      .shops_Box2 {
        .shops_action2 {
          transition: all 300ms ease;
          -moz-transition: all 300ms ease;
          -webkit-transition: all 300ms ease;
          top: 193px;
          opacity: 1;
          z-index: 6;
        }
        // .shops_info22 {
        //   font-size: 12px;
        //   transition: all 300ms ease;
        //   -moz-transition: all 300ms ease;
        //   -webkit-transition: all 300ms ease;
        //   top: 449px;
        //   opacity: 1;
        //   z-index: 5;
        // }
      }
    }
    .hover_box {
      width: 230px;
    }
  }
  /* 公共样式 */
  // 优惠卷
  .coupon_Box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 25px;
    line-height: 25px;
    margin-bottom: 10px;
    .coupon_img {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 65px;
      height: 25px;
      color: white;
    }
  }
}
.display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .timer {
    display: inline-block;
    width: 70px;
    color: blue;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
  }
  .titler {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
  }
}
.homepage {
  width: 100%;
  .homepage_main {
    width: 1280px;
    margin: 0 auto;
    .top_class {
      padding-top: 10px;
      .class_list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .classradio::v-deep {
          .el-radio__label {
            font-size: 12px;
          }
          .el-radio__input {
            display: none;
          }
          .el-radio {
            padding: 8px;
            border: 1px solid #dfdfdfb3;
            border-radius: 10px;
            margin-right: 13px;
          }
          .el-radio:hover {
            border: 1px solid #599efd;
          }
          .el-radio__label {
            padding: 8px;
          }
          .is-checked {
            border: 1px solid #599efd;
          }
        }
      }
    }
    .banner {
      width: 1280px;
      padding-top: 10px;
      .banner_main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .banner_left {
          width: 290px;
          .swiper_box::v-deep {
            // width: 320px;
            height: 485px;
            .left_title {
              width: 100%;
              padding: 10px 0;
              font-size: 20px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #4e78ff;
              text-align: center;
            }
            .el-radio-button__inner {
              padding: 7px 12px;
              border-left: none;
            }
            .el-radio-button__inner:hover {
              border-color: #4d77ff;
              background: #4d77ff;
              color: white;
            }
            .is-active {
              background: #4d77ff;
              .el-radio-button__inner {
                border-color: #4d77ff;
                background: #4d77ff;
              }
            }
            .swiper-paginations {
              width: 80px;
              position: absolute;
              left: 50%;
              bottom: -3px;
              transform: translateX(-50%);
              white-space: nowrap;
              z-index: 99;
              .swiper-pagination-bullet {
                margin: 0 4px;
                cursor: pointer;
              }
              // .swiper-pagination-bullet-active-main {
              //   transform: scale(1);
              // }
            }
            .swiper-button-prevs {
              position: absolute;
              top: 184px;
              left: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 35px;
              background: #666;
              // opacity: 0.4;
              border-radius: 0px 18px 18px 0px;
              box-sizing: border-box;
              // padding-right: 6px;
              // transform: translateY(-50%);
              z-index: 2;
              cursor: pointer;
              opacity: 0;
            }
            .swiper-button-nexts {
              position: absolute;
              top: 184px;
              right: 1px;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 35px;
              background: #666;
              // opacity: 0.4;
              border-radius: 18px 0px 0px 18px;
              box-sizing: border-box;
              // padding-right: 6px;
              // transform: translateY(-50%);
              z-index: 2;
              cursor: pointer;
              opacity: 0;
            }
            .swiper-button-prevs:focus {
              outline: black;
            }
            .swiper-button-nexts:focus {
              outline: black;
            }
            .swiper-button-prevs::after {
              content: '';
            }
            .swiper-button-nexts::after {
              content: '';
            }
            .icon_jd_left {
              color: #fff;
              opacity: 0.5;
              font-size: 28px;
            }
            .swiper4 {
              position: relative;
              background-color: #fff;
            }
            .swiper4:hover {
              .prevs4 {
                opacity: 0.4;
              }
              .nexts4 {
                opacity: 0.4;
              }
              .prevs4:hover {
                background-color: blue;
                opacity: 1;
              }
              .nexts4:hover {
                background-color: blue;
                opacity: 1;
              }
            }
            .swiper5 {
              position: relative;
              background-color: #fff;
            }
            .swiper5:hover {
              .prevs5 {
                opacity: 0.4;
              }
              .nexts5 {
                opacity: 0.4;
              }
              .prevs5:hover {
                background-color: blue;
                opacity: 1;
              }
              .nexts5:hover {
                background-color: blue;
                opacity: 1;
              }
            }
            .swiper6 {
              position: relative;
              background-color: #fff;
            }
            .swiper6:hover {
              .prevs6 {
                opacity: 0.4;
              }
              .nexts6 {
                opacity: 0.4;
              }
              .prevs6:hover {
                background-color: blue;
                opacity: 1;
              }
              .nexts6:hover {
                background-color: blue;
                opacity: 1;
              }
            }
            .team_box {
              order: 0;
              width: 245px;
              // margin-right: 15px;
              height: 50px;
              box-sizing: border-box;
              padding-left: 60px;
              position: relative;
              cursor: pointer;
              margin: 15px auto;
              .team_left {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 0px;
                transform: translateY(-50%);
                border: 2px solid #fb8728;
                .userimg {
                  display: block;
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                  object-fit: cover;
                }
                .position {
                  position: absolute;
                  top: -4px;
                  left: -4px;
                  .cmark {
                    display: block;
                    width: 20px;
                    height: 22px;
                    object-fit: cover;
                  }
                  .cmark2 {
                    min-width: 16px;
                    height: 16px;
                    background: #4d75ff;
                    border-radius: 8px;
                    text-align: center;
                    padding: 0 3.5px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #fff;
                    line-height: 16px;
                    // position: absolute;
                    // top: -2px;
                    // left: -2px;
                  }
                }
                .position2 {
                  width: 33px;
                  height: 15px;
                  background: linear-gradient(
                    90deg,
                    #ffc74b 0%,
                    #ffb000 49%,
                    #ffc74b 100%
                  );
                  box-shadow: 0px 2px 5px 0px rgba(44, 44, 44, 0.15);
                  border-radius: 8px;
                  text-align: center;
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #fff;
                  line-height: 15px;
                  position: absolute;
                  bottom: 0;
                  left: 50%;
                  transform: translate(-50%, 50%);
                }
              }
              .team_right {
                text-align: left;
                .team_name {
                  width: 100%;
                  min-height: 20px;
                  padding-top: 6px;
                  font-size: 14px;
                  font-weight: bold;
                  color: #333;
                  line-height: 14px;
                }
                .team_name:hover {
                  color: blue;
                }
                .team_info {
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  min-width: 130px;
                  height: 20px;
                  background: rgba(251, 134, 39, 0.1);
                  border: 1px solid rgba(251, 134, 39, 0.25);
                  border-radius: 0px 10px 10px 10px;
                  margin-top: 9px;
                  padding: 0 10px;
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #ff4d40 !important;
                  line-height: 18px;
                  white-space: nowrap;
                }
              }
            }
          }
          .swiper_box:hover {
            .swiper-button-prev {
              opacity: 0.4;
            }
            .swiper-button-next {
              opacity: 0.4;
            }
            .swiper-button-prev:hover {
              background-color: blue;
              opacity: 1;
            }
            .swiper-button-next:hover {
              background-color: blue;
              opacity: 1;
            }
          }
        }
        .banner_center {
          width: 630px;
          // height: 485px;
          .swiper_box2::v-deep {
            position: relative;
            // height: 485px;
            width: 630px;

            .top_swiper {
              height: 485px;
              .swiper-pagination2 {
                width: 53px;
                height: 25px;
                line-height: 26px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                background: rgba(0, 0, 0, 0.5);
                padding: 0 10px;
                border-radius: 13px;
                text-align: center;
                position: absolute;
                top: 21px;
                left: 553px;
                color: white;
                z-index: 2;
              }
              .icon_jd_left {
                color: #fff;
                opacity: 0.5;
                font-size: 28px;
              }
              .swiper-button-prev2 {
                position: absolute;
                top: 180px;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 35px;
                background: #666;
                // opacity: 0.4;
                border-radius: 0px 18px 18px 0px;
                box-sizing: border-box;
                padding-right: 6px;
                // transform: translateY(-50%);
                z-index: 2;
                cursor: pointer;
                opacity: 0;
              }
              .swiper-button-next2 {
                position: absolute;
                top: 180px;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 35px;
                background: #666;
                // opacity: 0.4;
                border-radius: 18px 0px 0px 18px;
                box-sizing: border-box;
                padding-right: 6px;
                // transform: translateY(-50%);
                z-index: 2;
                cursor: pointer;
                opacity: 0;
              }
              .swiper-button-prev2:focus {
                outline: black;
              }
              .swiper-button-next2:focus {
                outline: black;
              }
              .swiper-button-prev2::after {
                content: '';
              }
              .swiper-button-next2::after {
                content: '';
              }
            }
            .bot_swiper {
              width: 630px;
              position: absolute;
              bottom: 10px;
              z-index: 2;
              .swiper-slide {
                box-sizing: border-box;
                transform: scale(0.9);
                position: relative;
              }
              .shade {
                width: 100%;
                height: 106%;
                background-color: rgba(0, 0, 0, 0.6);
                position: absolute;
                top: 0;
              }
              .swiper-slide-active {
                border: 1px solid #ffffff;
                transform: scale(1);
                .shade {
                  background-color: rgba(0, 0, 0, 0);
                }
              }
              .swiper-slide:hover {
                .shade {
                  background-color: rgba(0, 0, 0, 0);
                }
              }
            }
          }
          .swiper_box2:hover {
            .top_swiper {
              .swiper-button-prev2 {
                opacity: 0.4;
              }
              .swiper-button-next2 {
                opacity: 0.4;
              }
              .swiper-button-prev2:hover {
                background-color: blue;
                opacity: 1;
              }
              .swiper-button-next2:hover {
                background-color: blue;
                opacity: 1;
              }
            }
          }
        }
        .banner_right {
          height: 487px;
          width: 300px;
          box-sizing: border-box;
          .login_box {
            height: 200px;
            box-sizing: border-box;
            .login_main {
              box-sizing: border-box;
              padding: 10px 20px 20px 20px;
              .login_btn::v-deep {
                .el-button {
                  padding: 8px 32px;
                  font-size: 16px;
                  font-weight: bold;
                  a {
                    color: gray;
                  }
                }
                .el-button:nth-child(1) {
                  background: linear-gradient(180deg, #599efd, #4d74ff);
                  a {
                    color: #fff;
                  }
                }
              }
            }
            .logined {
              box-sizing: border-box;
              padding: 10px 20px 20px 20px;
              position: relative;
              // background: url("~@/assets/logo.png") no-repeat center;
              // background-size: 50% 50%;
              // background-position: center 50%;
              .avatar {
                padding-bottom: 10px;
                width: 200px;
                margin: 0 auto;
                font-weight: bold;
                position: relative;
                z-index: 2;
                /deep/.el-button {
                  position: absolute;
                  top: 1px;
                  right: -61px;
                  color: #4d74ff;
                  z-index: 2;
                  border: 1px solid #4d74ff;
                }
              }
              .login_btn::v-deep {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .el-button {
                  padding: 8px 32px;
                  font-size: 16px;
                  font-weight: bold;
                  z-index: 2;
                }
                // .el-button:nth-child(1) {
                //   background: linear-gradient(180deg, #599efd, #4d74ff);
                // }
              }
            }
            .logined::before {
              content: '';
              background: url('~@/assets/logo.png') no-repeat center;
              opacity: 0.1;
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              background-size: 56% 70%;
              background-position: 138px;
              transform: rotate(7deg);
              z-index: 1;
            }
          }
          .news_box {
            .news_main {
              .news_nav::v-deep {
                // display: flex;
                width: 300px;
                height: 36px;
                background: #f8f9ff;
                box-sizing: border-box;
                padding: 0 30px;
                .el-radio__input {
                  display: none;
                }
                .el-radio__label {
                  display: block;
                }
                .news_item {
                  // width: 50%;
                  // height: 36px;
                  box-sizing: border-box;
                  padding-top: 10px;
                  // position: relative;
                  text-align: center;
                  font-size: 14px;
                  font-weight: 400;
                  color: #666;
                  font-family: PingFang SC;
                  transition: all 0.2s ease-in-out;
                  cursor: pointer;
                }
                .line {
                  width: 25px;
                  height: 2px;
                  background: #4d76ff;
                  // position: absolute;
                  // bottom: 0;
                  // left: 50%;
                  margin-left: 24px;
                  transform: translateX(-50%) scaleX(0);
                  transition: transform 0.2s ease-in;
                }
                .is-checked {
                  font-weight: 600;
                  color: #4d75ff;
                  .line {
                    transform: translateX(-50%) scaleX(1);
                  }
                }
              }
              .rule_box {
                display: flex;
                justify-items: flex-start;
                flex-wrap: wrap;
                align-items: flex-start;
                .rule_span {
                  display: inline-block;
                  width: 50%;
                  text-align: left;
                  .timer {
                    display: inline-block;
                    width: 50px;
                    color: blue;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                  }
                  .titler {
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                  }
                }
              }
            }
          }
        }
      }
    }
    .fine_goods {
      margin-top: 20px;
      .header_title {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #4e78ff;
        line-height: 24px;
      }
      .line1 {
        display: inline-block;
        width: 1px;
        height: 11px;
        background: rgba(78, 119, 255, 0.3);
        box-sizing: border-box;
        margin: 0 10px;
      }
      .header_en {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #4e78ff;
        line-height: 14px;
        opacity: 0.5;
      }

      .more_goods::v-deep {
        width: 100%;
        .el-button {
          border: none;
        }
      }
      .more_goods:hover {
        .el-button {
          border: none;
          background-color: #80808042;
        }
      }
    }
    .sale_box::v-deep {
      margin-top: 20px;
      .header_title {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #4e78ff;
        line-height: 24px;
      }
      .line1 {
        display: inline-block;
        width: 1px;
        height: 11px;
        background: rgba(78, 119, 255, 0.3);
        box-sizing: border-box;
        margin: 0 10px;
      }
      .header_en {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #4e78ff;
        line-height: 14px;
        opacity: 0.5;
      }
      /* .el-radio-button__inner {
        //padding: 10px 10px;
      } */
      .container {
        height: 615px;
        display: flex;
        justify-content: space-between;
        .el-divider--vertical {
          height: 615px;
        }
        .brandsale {
          text-align: left;
          width: 365px;
          .title_box {
            padding: 10px 0;
            .topt {
              font-size: 18px;
              color: #333;
              line-height: 18px;
              font-weight: 400;
            }
            .bott {
              font-size: 12px;
              color: #999;
              line-height: 18px;
              margin-top: 4px;
            }
          }
          .sale_left {
            .sale_right {
              width: 365px;
              height: 264px;
              border-radius: 10px;
              background-size: cover;
              margin-bottom: 10px;
              transition: all 300ms ease;
              text-align: center;
              .sale_name {
                color: #fff;
                text-align: center;
                padding-top: 26px;
                .item_name {
                  font-size: 28px;
                  font-weight: bold;
                }
                .item_info {
                  font-size: 14px;
                  font-weight: bold;
                }
              }
              .sale_discount {
                display: flex;
                justify-content: center;
                margin-top: 14px;
                color: white;
                .span:nth-child(1) {
                  margin-left: 0;
                }
                span {
                  min-width: 95px;
                  height: 25px;
                  line-height: 23px;
                  box-sizing: border-box;
                  border: 1px solid rgba(255, 255, 255, 0.3);
                  padding: 0 10px;
                  background: rgba(78, 119, 255, 0.6);
                  border-radius: 13px;
                  margin-left: 10px;
                }
              }
              .salemaingoods {
                display: flex;
                justify-content: center;
                margin-top: 25px;
                .goods_a {
                  display: inline-block;
                  width: 90px;
                  height: 90px;
                  border-radius: 10px;
                  position: relative;
                  overflow: hidden;
                  margin-left: 10px;
                  transition: all 0.2s ease-in-out;
                }
                .goods_price {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  background: linear-gradient(90deg, #ff703d 0%, #ff4e41 100%);
                  border-radius: 10px 0px 10px 0px;
                  padding: 0 6px;
                  font-size: 12px;
                  color: #fff;
                }
                .goods_a:hover {
                  transform: translateY(-5px);
                }
              }
            }
            .sale_right:nth-child(2) {
              margin-top: 20px;
            }
            .sale_right:hover {
              transform: translateY(-5px);
            }
          }
        }
        .salerankinglist {
          width: 671px;
          text-align: left;
          .title_box {
            padding: 10px 0;
            .topt {
              font-size: 18px;
              color: #333;
              line-height: 18px;
              font-weight: 400;
            }
            .bott {
              font-size: 12px;
              color: #999;
              line-height: 18px;
              margin-top: 4px;
            }
          }
        }
        .salelibrary {
          width: 150px;
          padding: 0 10px;
          text-align: left;
          .title_box {
            padding: 10px 0;
            .topt {
              font-size: 18px;
              color: #333;
              line-height: 18px;
              font-weight: 400;
            }
            .bott {
              font-size: 12px;
              color: #999;
              line-height: 18px;
              margin-top: 4px;
            }
          }
          .slaelist {
            padding: 10px 5px;
            box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.08);
            transition: all 300ms ease;
          }
          .slaelist:hover {
            transform: translateY(-5px);
          }
        }
      }
    }
  }
}
</style>
